<template>
  <div class="chat-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="title">智能问答</div>
      <div class="actions">
        <span class="icon">⏱</span>
        <span class="icon">+</span>
        <span class="icon">×</span>
      </div>
    </div>

    <!-- 聊天内容区 -->
    <div class="chat-content">
      <!-- AI 消息 -->
      <div class="message ai-message">
        <div class="message-content">
          {{ aiResponse }}
        </div>
        <div class="message-actions">
          <button>👍</button>
          <button>👎</button>
          <button>🔊</button>
          <button>📋</button>
          <button>🔄</button>
        </div>
      </div>

      <!-- 建议问题列表 -->
      <div class="suggested-questions">
        <div v-for="(question, index) in suggestedQuestions" 
             :key="index" 
             class="question">
          {{ question }}
        </div>
      </div>
    </div>

    <!-- 底部输入框 -->
    <div class="input-area">
      <div class="input-wrapper">
        <input type="text" 
               placeholder="请输入您的内容..." 
               v-model="userInput"
               @keyup.enter="sendMessage">
        <button class="voice-btn">🎤</button>
      </div>
      <div class="bottom-bar">
        <button>≡</button>
        <button>⚪</button>
        <button>＜</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const userInput = ref('')
const aiResponse = ref('你好！我是昆仑大模型，由中石油数智院开发，专注于能源化工行业、油气、炼化、新能源等领域。我具备语言理解、生成和视觉识别等能力，旨在为能源化工行业提供专业服务和知识支持。如果你有任何关于这些领域的问题，欢迎随时向我提问！')
const suggestedQuestions = ref([
  '昆仑大模型在能源化工行业的应用有哪些具体案例？',
  '昆仑大模型如何处理和分析油气领域的数据？',
  '昆仑大模型在新能源领域能提供哪些类型的服务？'
])

const sendMessage = () => {
  // 处理发送消息的逻辑
  console.log('发送消息:', userInput.value)
  userInput.value = ''
}
</script>

<style scoped>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
  height: 100vh;
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 15px;
}

.icon {
  cursor: pointer;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}

.message {
  margin-bottom: 20px;
}

.ai-message .message-content {
  background: white;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.message-actions {
  display: flex;
  gap: 10px;
}

.message-actions button {
  background: #f0f2f5;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.suggested-questions .question {
  background: white;
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 8px;
  cursor: pointer;
}

.input-area {
  padding: 20px;
  background: white;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  position: sticky;
  bottom: 0;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f0f2f5;
  border-radius: 20px;
  padding: 5px 15px;
  margin-bottom: 10px;
}

input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px;
  outline: none;
}

.voice-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.bottom-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}

.bottom-bar button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
}
</style>